<template>
    <a-select @click.native="selectFocus" @select="selectedOneHandler" :open="openMenu" showSearch v-model:value="value"
        style="width: 300px" :options="items.map(item => ({ value: item }))">
        <template #dropdownRender="{ menuNode: menu }">
            <v-nodes :vnodes="menu" />
            <a-divider style="margin: 4px 0" />
            <a-input style="width: 95%;margin: 0 8px; justify-content: center;" v-if="showInp" v-model:value="newOption"
                @pressEnter.stop="submitNewOption" @blur="inpBlurHandler" placeholder="请输入新的计算单元(按下回车添加)"></a-input>
            <div style="padding: 4px 8px; cursor: pointer" @mousedown="e => e.preventDefault()" @click="addItem">
                <plus-outlined />
                Add item
            </div>
        </template>
    </a-select>
    <!-- <a-select @click.native="selectFocus" @select="selectedOneHandler" :open="openMenu" v-model:value="value"
        style="width: 300px" :options="items.map(item => ({ value: item }))">
        <template #dropdownRender="{ menuNode: menu }">
            <v-nodes :vnodes="menu" />
            <a-divider style="margin: 4px 0" />
            <a-input style="width: 95%;margin: 0 8px; justify-content: center;" v-if="showInp" v-model:value="newOption"
                @pressEnter.stop="submitNewOption" @blur="inpBlurHandler" placeholder="请输入新的计算单元(按下回车添加)"></a-input>
            <div style="padding: 4px 8px; cursor: pointer" @mousedown="e => e.preventDefault()" @click="addItem">
                <plus-outlined />
                Add item
            </div>
        </template>
    </a-select> -->
    <a-auto-complete v-model:value="value16" :options="[{ value: 'text 1' }, { value: 'text 2' }]" style="width: 200px"
        placeholder="Email" />

    <a-select v-model:value="value" showSearch style="width: 150px" placeholder="Tags Mode" :options="options" @blur="blurHandler" @search="testHandler" :autoClearSearchValue="false"
        ></a-select>
</template>

<script setup lang='ts'>
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';

let value16 = ref('')
const options = ref([
    {
        label: 'test1',
        value: 1
    },
    {
        label: 'test2',
        value: 2
    },
    {
        label: 'test3',
        value: 3
    },
    {
        label: 'test4',
        value: 4
    },
    {
        label: 'test5',
        value: 5
    },
    {
        label: 'test6',
        value: 6
    },
])



let items = ref(['jack', 'lucy']);
let value = ref('lucy');
let newOption = ref('')
let showInp = ref(false)
let openMenu = ref(false)

// 聚焦时的回调函数
const selectFocus = () => {
    openMenu.value = true
}
// 选中某一个时的回调函数
const selectedOneHandler = () => {
    openMenu.value = false
}
const addItem = () => {
    console.log('addItem');
    showInp.value = true
    // items.value.push(`New item ${(index += 1)}`);
};
const submitNewOption = () => {
    if (!newOption.value) {
        inpBlurHandler()
    } else if (items.value.includes(newOption.value)) {
        // 首先校验新添加的选项是否已经存在于下拉菜单当中，如果已经存在那么进行提示
        message.warning('新添加的选项已经存在，请重试！')
    } else {
        items.value.push(`${newOption.value}`);
        inpBlurHandler()
    }
}
// 输入框失焦的函数
const inpBlurHandler = () => {
    // 清空输入框的内容并隐藏输入框
    newOption.value = ''
    showInp.value = false
}
const VNodes = defineComponent({
    props: {
        vnodes: {
            type: Object,
            required: true,
        },
    },
    render() {
        return this.vnodes;
    },
});

const testHandler =(val)=>{
    value.value = val
}
const blurHandler = ()=>{}
</script>

<style scoped></style>